<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*outline:1px dotted;*/
        }
        .box{
            width:1100px;
            margin:0 auto;
        }
        .a,.b,.c,.d,.e{
            float:left;
            width:200px;height:300px;
            background:#cdcdcd;
            margin:0 0 0 25px;
        }
        .box .a{
            margin:0;
        }
        .clear{
            clear:both;
        }
        .box2{
            /*outline:1px dotted;*/
            width:1100px;
            margin:0 auto;
        }
        .box2 .left{
            width:300px;
            height:400px;
            background:#cdcdcd;
            float:left;
        }
        .box2 .right{
            width:800px;
            height:400px;
            /*background:#cdcdcd;*/
            float:right;
        }
        .box2_a ,.box2_b,.box2_c,.box2_d,.box2_e,.box2_f,.box2_g,.box2_h{
            width:180px;height:190px;
            float:left;
            background:#cdcdcd;
            margin-left:20px;
        }
        .box2_a ,.box2_b,.box2_c,.box2_d{
            margin-bottom:20px;
        }
        .footer{
            /*width:100%;*/
            height:100px;
        }
    </style>
</head>
<body>
    <div class="box">
        <span>a</span>
        <p>This is a paragraph!</p>
        <div class="a"></div>
        <div class="b"></div>
        <div class="c"></div>
        <div class="d"></div>
        <div class="e"></div>
        <div class="clear"></div>
        <span>a This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph! This is a paragraph!</span>
        <p>This is a paragraph!</p>
    </div>
    <div class="box2">
        <div class="left"></div>
        <div class="right">
            <div class="box2_a"></div>
            <div class="box2_b"></div>
            <div class="box2_c"></div>
            <div class="box2_d"></div>
            <div class="box2_e"></div>
            <div class="box2_f"></div>
            <div class="box2_g"></div>
            <div class="box2_h"></div>
        </div>
        <div class="clear"></div>
    </div>
    <div class="footer">This is a paragraph!</div>
</body>
</html>